﻿﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>逻辑应用预案库</title>
    <link rel="stylesheet" href="./css/css.css">
    <link rel="stylesheet" href="./css/leftBar.css">
    <script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
    <link type="text/css" rel="Stylesheet" href="./css/lapstyle.css"/>
    <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./js/messagecenter.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
	<script type="text/javascript" src="./js/jquery.page.js"></script>
	<link rel="stylesheet" href="./css/jquery.page.css">
    <style type="text/css">
        .app_text {
            color: #04A0E9;
            cursor: pointer;
            margin-left: 20px;
        }

        .app_text1 {
            color: #04A0E9;
            cursor: pointer;
        }

        .page-split input {
            display: inline;
            margin: 0px 4px;
        }

        .app_del {
            cursor: pointer;
            margin-left: 20px;
	        color: #414B54;
        }

        .text_color {
            color: #A6A6A6;
            text-align: left;
            text-indent: 14px;
            font-size:12px;
        }

        .text_name {
            text-align: left;
            text-indent: 14px;
            font-size:13px;
        }

        .app_no {
            background-color: #83BE00;
            width: 50px;
            height: 18px;
            margin-left: 16%;
            text-indent: 4px;
            border-radius: 4px;
            color: #FFFFFF;
            font-weight: 600;
            padding-top: 2px;
        }

        .headerTableDiv3 table tr td {
            border: 1px solid #2E6A89;
        }

    </style>
</head>
<body>
<div class="left_content">
    <div class="left_block1">
        <div class="left_logo"></div>
        <div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
        <div class="left_icons">
            <div class="left_icon1"></div>
            <div class="left_icon2"></div>
            <div class="left_icon3"></div>
        </div>
    </div>
    <div class="left_block2">
        <div class="left_menu" onclick="window.location.href='physical_topology_library';">拓扑文件库</div>
        <div class="left_menu" onclick="window.location.href='logical_application_library';" style="background-color:#04A0E9;color:#FFFFFF">逻辑预案库</div>
        <div class="left_menu" onclick="window.location.href='deploy_topology_library';">部署库</div>
        <div class="left_menu monitor">监控</div>
        <div class="left_menu level2">
            <div class="level2Border" onclick="window.location.href='physical_monitors';">
                物理监控
            </div>
        </div>
        <div class="left_menu level2">
            <div class="level2Border" onclick="window.location.href='logical_monitors';">
                逻辑监控
            </div>
        </div>
        <div class="left_menu other">其他</div>
        <div class="left_menu  level22">
            <div class="level22Border" onclick="window.location.href='commonCMD';">
                我的常用命令
            </div>
        </div>
        <div class="left_menu level22">
            <div class="level22Border" onclick="window.location.href='generalCMD';">
                命令模板
            </div>
        </div>
    </div>
    <form th:action="@{/logout}" method="post" >
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
			<button class="login"  type="submit">注销</button>
		</div>
	</form>
</div>
<div class="right_content">
    <form id="form1">
        <input type="hidden" id="curIndex" value="0"/>
        <input type="hidden" id="maxPage" value="0"/>
        <input type="hidden" id="curId" name="curId">
        <input type="hidden" id="id" name="id">
        <div class="top-bar">
            <div style="float:left;">逻辑应用预案库<br>
                <span class="text_color" style="font-size: 13px;">Logical&nbsp;application&nbsp;plan&nbsp;library</span>
            </div>
            <div class="top_input" style="float:right; height:36px;margin-top: 12px;">
                <button class="add" type="button" style="margin-left:20px;border-radius: 5px;" onclick="$('#showInfo5').show()">+添加</button>
                <button class="search" type="button">搜索</button>
                <input class="s_input" type="text" id="condition" placeholder="输入关键字搜索"/>
            </div>
        </div>
        <div class="table-box">
            <div class="headerTableDiv">
                <table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <colgroup>
                        <col width="10%">
                        <col width="15%">
                        <col width="8%">
                        <col width="12%">
                        <col width="12%">
                        <col width="18%">
                        <col width="25%">
                    </colgroup>
                    <tr>
                        <td>
                            <div class="text_name" style="">编号</div>
                            <div class="text_color">Serial&nbsp;number</div>
                        </td>
                        <td>
                            <div class="text_name" style="">应用名称</div>
                            <div class="text_color">The&nbsp;application&nbsp;name</div>
                        </td>
                        <td>
                            <div class="text_name" style="">创建人</div>
                            <div class="text_color">founder</div>
                        </td>
                        <td>
                            <div class="text_name" style="">创建时间</div>
                            <div class="text_color">Creation&nbsp;time</div>
                        </td>
                        <td>
                            <div class="text_name" style="">修改时间</div>
                            <div class="text_color">Modify&nbsp;the&nbsp;time</div>
                        </td>
                        <td>
                            <div class="text_name" style="">备注</div>
                            <div class="text_color">note</div>
                        </td>
                        <td>
                            <div class="text_name" style="text-indent: 0px;">操作</div>
                            <div class="text_color" style="text-indent: 0px;">operation</div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="contentTableDiv">
                <table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;">
                    <colgroup>
                        <col width="10%">
                        <col width="15%">
                        <col width="8%">
                        <col width="12%">
                        <col width="12%">
                        <col width="16%">
                        <col width="27%">
                    </colgroup>
                    <tbody id="contentTableTbody"></tbody>
                </table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="page-split">
            <div id="page" style="float:left;"></div>
            <div class="page_count text_color" style="float:right;font-size:13px;">共0条/0页</div>
        </div>
        <!-- 弹窗 -->
        <div class="pop_content" id="showInfo">
        	<div class="pop_block">
                <div class="pop_barInfo">
                    <div style="font-size: 18px;">预置表信息查看</div>
                    <span>view&nbsp;the&nbsp;preset&nbsp;table&nbsp;information</span>
                </div>
                <div class="exit_pop"><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop();"></div>
                <div class="headerTableDiv2">
                    <table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                        <colgroup>
                            <col width="30%">
                            <col width="30%">
                            <col width="30%">
                            <col width="10%">
                        </colgroup>
                        <tr>
                            <th>
                                <div>序号</div>
                            </th>
                            <th>
                                <div>APP名称</div>
                            </th>
                            <th>
                                <div>APP_ID</div>
                            </th>
                            <th></th>
                        </tr>
                    </table>
                </div>
                <div class="contentTableDiv2">
                    <table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;">
                        <colgroup>
                            <col width="30%">
                            <col width="30%">
                            <col width="30%">
                            <col width="10%">
                        </colgroup>
                        <tbody id="popTbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </form>
</div>
<!--逻辑添加弹窗-->
<div class="pop_content2" id="showInfo5">
	<div class="pop_block2">
        <div class="pop_barInfo">
            <div style="font-size: 18px;color:#424B52;">添加逻辑预案</div>
        </div>
        <div class="exit_pop"><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop5();"></div>
        <div class="create_new">

            <div class="f1">
                <div style="color:#5F6C74;">名称&nbsp;:</div>
                <div><input id="name" type="text" placeholder="输入名称"></div>
            </div>
            <div class="f2">
                <div style="color:#5F6C74;">备注&nbsp;:</div>
                <div style="width:90%;"><textarea id="comment" class="contentTextTextArea" placeholder="输入备注信息"></textarea></div>
            </div>
        </div>
        <div class="bt-btn" style="position: absolute;width:100%;bottom:20px;left:10px;">
            <button class="btn-s" onclick="dissave()">取消</button>
            <button class="btn-s save" style="margin-left: 15px;" onclick="doSave()">保存</button>
        </div>
    </div>
</div>
    

</body>
<script type="text/javascript">
    $(function () {
        $(".search").on("click", function () {
            var curIndex = $("#curIndex").val();
            var name_like = $("#condition").val();
            getList(curIndex, name_like);
        });
    });

    function doSave() {
        var name = $("#name").val();
        if(name==null){
        	alert("预案库名不能为空 ");
        	return false;
        }
        //var serial = $("#serial").val();//注：此处聚会为空，下方代码使用固定值,实际应用请修改
        var comment = $("#comment").val();
        var url = "[[@{/logic_topology/save}]]";
        //application/json数据正确提交方式
        var data = JSON.stringify({
            "enabled": true,
            "name": name,
            "remark": comment,
            "no":"0"
        })
        $.ajax({
            url: url,
            data:data,
            contentType: "application/json",
            type: "POST",
            dataType:"JSON"
        }).done(function (result) {
        	alert("保存成功");
           location.reload();
        });
    }
    function dissave() {
        $("#name").val('');
        
        $("#comment").val('');
        $("#showInfo5").hide();
    }
	$(".add").on("click",function(){
        $("#showInfo5").show();
	});
    function exit_pop5() {
        $("#showInfo5").hide();
    }

   

    /*编辑*/
    function edit(id) {
        var url = '[[@{/logical_link_bindors}]]';
        $("#id").val(id);
        $("#form1").attr({action: url, method: "GET"}).submit();
    }

    /*删除*/
    function Delete(id) {
        var url = "[[@{/logic_topology/delete}]]";

        if(id!=null) {
   			var flag = confirm("确定要删除吗?");
   			if(flag){
   				$.post(url, {id: id}, "JSON").done(function (data) {
   				    if (data.success) {
   						alert("删除成功");
   						location.reload();
   					}
   				});
   			}
           }else {
   			alert("请选择要删除的id");
   		}
        
        
        
/*         if (id != null) {
            $.ajax({
                url: url,
                data: {
                    "id": id
                },
                type: "POST"
            }).done(function (result) {
            	alert("删除成功");
				location.reload();
            });
        } else {
            alert("请选择要删除的id");
        } */
    }

    /*初始列表*/
    var allData=[];
     $(function () {
    	 getList();
     });
     /*列表*/
    function getList(curIndex, name_like) {
        var url = "[[@{/logic_topology/query}]]";
        $("#curIndex").val(curIndex);
       // var param = {params: {name_like: name_like}, pageable: {page: 0, start: 0, size: 30}};
        $.ajax({
            url: url,
            data: {
                "pageable.page": curIndex,
                "pageable.size": 30,
                //"pageable.start":curIndex*25,查询时此值不需要，后台会根据 page 和size计算
                "pageable.sort": "[{'property':'cdt','direction':'desc'}]",//如果不需要排序，此参数可以不要
                "params.name_like": name_like,
                "params.enabled_eq": true,
                "enabled":1
            },
            type: "POST"
        }).done(function (result) {
            $("#contentTableTbody").html('');
            allData=result.data;
            addData(result.data,result.data.length,25);
        });
    }

    /*列表*/
    function addData(data, total, pageSize) {
        var maxPage = Math.ceil(total / pageSize);
        pageCal(1, maxPage, total);
        $("#maxPage").val(maxPage);
        $("#contentTableTbody").empty();
        var html = '';
        $.each(data, function (k, v) {
            html += '<tr>';
            html += '<td><div class="app_no">NO.'+(k+1) + '</div></td >';
            html += '<td><div class="app_text1" style="cursor:default;">' + v.name + '</div></td>';
            html += '<td><div class="text_color" style="text-indent: 0px;margin-left:5px;">' + v.creator + '</div></td>';
            html += '<td style="text-indent: 0px;"><div class="text_color" style="text-indent: 0px;margin-left:5px;">' +new Date(v.cdt).format("yyyy-MM-dd hh:mm:ss") + '</div></td>';
            if(v.lastModifyTime){
	            html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:5px;">' + v.lastModifyTime + '</div></td>';
            }else{
	            html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:5px;"></div></td>';
            }
            if(v.remark){
	            html += '<td ><div>' + v.remark + '</div></td>';
            }else{
	            html += '<td ><div></div></td>';
            }
            html += '<td style="text-indent: 0px;">';
            html += '<button type="button" style="margin-left:20px;" onclick="open_pop(' + v.id + ');">查看预置表</button>';
            html += '<a class="app_text update" style="margin-left:40px;" onclick="edit(' + v.id + ');">编辑</a>';
            html += '<a class="app_del" style="margin-left:40px;" onclick="Delete(' + v.id + ');">删除</a>';
            html += '</td>';
            html += '</tr>';
        });
        $("#contentTableTbody").append(html);
        tableSum();
    }

    /*弹窗*/
    function open_pop(id) {
        var url = "[[@{/logic_topology/get_by_id}]]";
        $.ajax({
        	url:url,
        	data:{id:id},
        	type:"POST",
        	dataType:"JSON"
        }).done(function(data){
             tableSum2();
             if(data){
                 addDataPop(data.data.apps);
             }
         });
        $("#showInfo").show();
    }

    function addDataPop(data) {
        $("#popTbody").empty();
        var html = '';
        $.each(data, function (k, v) {
            html += '<tr>';
            html += '<td><div class="conn_no">NO.' + (k+1) + '</div></td>';
            html += '<td>' + v.name + '</td>';
            html += '<td>' + v.id + '</td>';
            html += '<td class="pop_child">';
            html += '<div  class="pop-expand">展开</div>';
            html += '</td>';
            html += '</tr>';
        });
        $("#popTbody").append(html);
        tableSum2();
        /*子弹窗*/
        $("#popTbody .pop-expand").on("click", function () {
            if ($(this).hasClass("pop-hide")) {
                $(this).removeClass("pop-hide")
                $(".child_tr").remove();
                $(this).parent().parent().next().removeClass("border-top-none");
            } else {
                var td=$(this).parents("tr").find("td");
                var id=$(td[2]).html();
                var url = "[[@{/logic_link/find_by_app_id}]]";
                $(this).addClass("pop-hide")
                var popObj = $(this);
                $.ajax({
                	url:url,
                	data:{appId:id},
                	type:"POST",
                	dataType:"JSON"
                }).done(function(data){
    	             if(data){
    	            	 addChildPop(data.data, popObj);
    	             }
                 });
            } 
        });
    } 


    function exit_pop() {
        $("#showInfo").hide();
    }

    /*子弹窗*/
    function addChildPop(data, obj) {
        var html = '<tr class="child_tr"><td style="border:none;" colspan=4>';
        html += '<table style="width:100%;" >';
        html += '<tr class="border-top-none child-pop"><td>序号</td><td>发送端APP名称</td><td>发送端ID</td><td>发送端口名称</td><td>接收端APP名称</td><td>接收端口ID</td><td>接收端口名称</td></tr>'
        if (data && data.length > 0) {
            $.each(data, function (k, v) {
            	var id=k+1;
                if (k == data.length - 1) {
                    html += '<tr class="border-bottom-none child-pop">';
                } else {
                    html += '<tr class="child-pop">';
                }
                html += '<td width="14%" >链路' +id+ '</td>';
                html += '<td width="14%">' + v.leftApp.name + '</td>';
                html += '<td width="14%">' + v.leftApp.id + '</td>';
                html += '<td width="14%">' + v.leftPort + '</td>';
                html += '<td width="14%">' + v.rightApp.name + '</td>';
                html += '<td width="14%">' + v.rightApp.id + '</td>';
                html += '<td width="14%">' + v.rightPort + '</td>';
                html += '</tr>';
            });
        }
        html += '</table>';
        html += '</td></tr>';
        obj.parent().parent().next().addClass("border-top-none");
        obj.parent().parent().after(html);
    } 
    function tableSum2() {
        $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
        if ($(".contentTableDiv2").scrollTop() > 0) {
            var scrollWidth = getScrollbarWidth();
            $(".contentTableDiv2").css("right", (30 - scrollWidth) + "px");
        } else {
            $(".contentTableDiv").css("right", 30 + "px");

            $(".contentTableDiv2 table").css("width", "100%");
        }
        $(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
    }
	//分页 
    function pageCal(curIndex, pageCount, totalCount) {
			$("#page").Page({
			  totalPages: pageCount,//分页总数
			  liNums: 7,//分页的数字按钮数(建议取奇数)
			  activeClass: 'activP', //active 类样式定义
			  callBack : function(page){
					console.log(page);
			        $("#contentTableTbody").empty();
					 var newAllData=[];
					for(var i=(page-1)*25;i<allData.length;i++){
						newAllData.push(allData[i]);
					}
					 var html = '';
				        $.each(newAllData, function (k, v) {
				            html += '<tr>';
				            html += '<td><div class="app_no">NO.'+(k+(page-1)*25) + '</div></td >';
				            html += '<td><div class="app_text1" style="cursor:default;">' + v.name + '</div></td>';
				            html += '<td><div class="text_color" style="text-indent: 0px;margin-left:5px;">' + v.creator + '</div></td>';
				            html += '<td style="text-indent: 0px;"><div class="text_color" style="text-indent: 0px;margin-left:5px;">' +new Date(v.cdt).format("yyyy-MM-dd hh:mm:ss") + '</div></td>';
				            if(v.lastModifyTime){
					            html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:5px;">' + v.lastModifyTime + '</div></td>';
				            }else{
					            html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:5px;"></div></td>';
				            }
				            if(v.remark){
					            html += '<td ><div>' + v.remark + '</div></td>';
				            }else{
					            html += '<td ><div></div></td>';
				            }
				            html += '<td style="text-indent: 0px;">';
				            html += '<button type="button" style="margin-left:20px;" onclick="open_pop(' + v.id + ');">查看预置表</button>';
				            html += '<a class="app_text update" style="margin-left:40px;" onclick="edit(' + v.id + ');">编辑</a>';
				            html += '<a class="app_del" style="margin-left:40px;" onclick="Delete(' + v.id + ');">删除</a>';
				            html += '</td>';
				            html += '</tr>';
				        });
				        $("#contentTableTbody").append(html);
				        tableSum();
			  }
		  });
        $(".page-split .page_count").html('共' + totalCount + '条/' + pageCount + '页');
	}
    Date.prototype.format = function(fmt) { 
	     var o = { 
	        "M+" : this.getMonth()+1,                 //月份 
	        "d+" : this.getDate(),                    //日 
	        "h+" : this.getHours(),                   //小时 
	        "m+" : this.getMinutes(),                 //分 
	        "s+" : this.getSeconds(),                 //秒 
	        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
	        "S"  : this.getMilliseconds()             //毫秒 
	    }; 
	    if(/(y+)/.test(fmt)) {
	            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
	    }
	     for(var k in o) {
	        if(new RegExp("("+ k +")").test(fmt)){
	             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
	         }
	     }
	    return fmt; 
	}
    
    function tableSum() {
        $(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
        if ($(".contentTableDiv").scrollTop() > 0) {
            var scrollWidth = getScrollbarWidth();
            $(".contentTableDiv").css("right", (20 - scrollWidth) + "px");
        } else {
        	//    right: 20px;
            $(".contentTableDiv").css("right", 20 + "px");

            $(".contentTableDiv table").css("width", "100%");
        }
        $(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
    }
    function getScrollbarWidth() {
        var odiv = document.createElement('div'),//创建一个div
            styles = {
                width: '100px',
                height: '100px',
                overflowY: 'scroll'//让他有滚动条
            }, i, scrollbarWidth;
        for (i in styles) odiv.style[i] = styles[i];
        document.body.appendChild(odiv);//把div添加到body中
        scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
        odiv.remove();//移除创建的div
        return scrollbarWidth;//返回滚动条宽度
    }
    function showBig(){
		window.location.href="physical_monitors2"
	}
</script>
<script type="text/javascript">
		//彈窗拖動
		$(function(){
			$(".pop_block").on({
			    mousedown: function(e){
					    	var obj = e.target;
			    			if(!$(obj).is("input")){
			    				var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		
			$(".pop_block2").on({
			    mousedown: function(e){
					    	var obj = e.target;
			    			if(!$(obj).is("input")){
			    				var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		});
	</script>
</html>
